import axios from "axios";
import React, { useEffect, useState, useCallback } from "react";
import { Tabs } from "react-vant";

import { useNavigate } from "react-router-dom";
import moment from "moment";
import TopNav from "../../../components/topNav";
import "./index.css";
import request from "../../../utils/request";
import { useAppDispatch,useAppSelector } from "../../../store";
import { getAknowledgeNav } from "../../../store/sliceReducer/HomeSliceReducer";
const Index: React.FC = () => {
  const dispatch = useAppDispatch();
  const { knowledgeNav } = useAppSelector((state) => state.home);
  const [tab, setTab] = useState<[]>([]);
  const [con, setCon] = useState<[]>([]);
  const navigate = useNavigate();

  // 从localStorage获取收藏状态
  const getStoredCollectionState = useCallback((sickCircleId: number) => {
    try {
      const stored = localStorage.getItem(`collection_${sickCircleId}`)
      return stored ? JSON.parse(stored) : null
    } catch (error) {
      console.error('解析收藏状态失败:', error)
      return null
    }
  }, [])

  // 获取显示用的收藏数量
  const getDisplayCollectionNum = useCallback((item: any) => {
    const storedState = getStoredCollectionState(item.sickCircleId)
    if (storedState) {
      return storedState.collectionNum
    }
    return item.collectionNum
  }, [getStoredCollectionState])

  useEffect(() => {
    dispatch(getAknowledgeNav());
    getCon(2)
  }, [dispatch]);

  const getCon = async (name: any) => {
    console.log(name);
    
    const params = {
      departmentId: name+1,
      page: 1,
      count: 45,
    };
    await request.get(
      "/api/health/user/sickCircle/v1/findSickCircleList",{params}
    ).then(res=>{
      console.log(res);
      const {status,result} = res.data
      if(status=='0000'){
        setCon(result)
      }
      
    });
  };
  return (
    <div className="box">
              <TopNav title="病友圈" />
      <div className="nav">
        <Tabs
          defaultActive={0}
          color="#3087ea"
          onChange={(name) => getCon(name)}
        >
          {knowledgeNav &&
            knowledgeNav.map((item: any, ind: number) => (
              <Tabs.TabPane
                key={item.id}
          
                title={item.departmentName}
              >
                <div className="content-byq">
                  {con&&
                    con.map((item: any, ind: number) => (
                      <div 
                        key={ind} 
                        className="list"
                        onClick={() => navigate(`/BpatientCircle/BpatientCircleDetail?sickCircleId=${item.sickCircleId}`)}
                      >
                        <p className="list_title">{item.title}</p>
                        <p className="list_time">
                          {moment(item.releaseTime).format("YYYY-MM-DD HH:mm")}
                        </p>
                        <p className="list_con">{item.detail}</p>
                        <p className="list_num">
                          <span>收藏 {getDisplayCollectionNum(item)}</span>
                          <span>建议 {item.commentNum}</span>
                        </p>
                      </div>
                    ))}
                </div>
              </Tabs.TabPane>
            ))}
        </Tabs>
      </div>
    </div>
  );
};

export default Index;
